{% extends "./layout.html" %}

{% block css %}
<link rel="stylesheet" href="/css/mobile/home.css">
<link rel="stylesheet" href="/css/swiper.min.css">
{% endblock %}

{% block content %}
<!--头部搜索栏-->
<div class="header">
    <img src="/images/mobile/Magnifier.png" alt="" />
    <input type="text" placeholder="输入搜索内容" id="search_input" />
</div>
<!--轮播图-->
<div class="banner">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="/images/mobile/1.jpg">
            </div>
            <div class="swiper-slide">
                <img src="/images/mobile/2.jpg">
            </div>
            <div class="swiper-slide">
                <img src="/images/mobile/3.jpg">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
<!--内容区-->
<div class="content">
    <div class="data">
        <div class="title">
            <h2>前端手册</h2>
            <a class="more" href="/book">
                查看更多
                <span class="arrow">></span>
            </a>
        </div>
        <div class="list">
            {% for book in bookList %}
            <a class="data_list" href="/chapter/{{book.id}}">
<!--                书籍封面-->
                <div class="dataImg">
                    <img src="{{book.img}}" alt="书籍封面">
                </div>
<!--                书本信息-->
                <div class="introduce">
                    <h3 class="bookTitle">{{book.title}}</h3>
                    <p class="create-time">{{book.updatedAt}}</p>
                </div>
                <span class="jump"><span class="enter">进入</span></span>
            </a>
            {% endfor %}
        </div>
        <div class="title">
            <h2>精选博客</h2>
            <a class="more" href="/blog">
                查看更多
                <span class="arrow">></span>
            </a>
        </div>

        <div class="list">
            {% for blog in blogList %}
            <a class="data_list" href="/blog/{{item.id}}">
                <div class="dataImg">
                    <img src="{{blog.img}}" alt="">
                </div>
                <div class="introduce">
                    <h3 class="bookTitle">{{blog.title}}</h3>
                    <p class="create-time">{{blog.updatedAt}}</p>
                </div>
                <span class="jump" href="/blog/{{item.id}}"><span class="enter">进入</span></span>
            </a>
            {% endfor %}
        </div>
        <div class="title">
            <h2>精选视频</h2>
            <a class="more" href="/video">
                查看更多 <span class="arrow">></span>
            </a>
        </div>

        <div class="list">
            {% for video in videoList %}
            <a class="data_list" href="/videoDetail/{{video.id}}">
                <div class="dataImg">
                    <img src="{{video.img}}" alt="">
                </div>
                <div class="introduce">
                    <h3 class="bookTitle">{{video.title}}</h3>
                    <p class="create-time">{{video.updatedAt }}</p>
                </div>
                <span class="jump"><span class="enter">进入</span></span>
            </a>
            {% endfor %}
        </div>
    </div>
</div>
<div class="menu_container">
    {% include "./menu.html" ignore missing %}
</div>
{% include "./footer.html" ignore missing %}


{% endblock %}

{% block js %}
<script src="/css/swiper-4.5.3/dist/js/swiper.min.js"></script>
<script>
    let swiper = new Swiper('.swiper-container', {
        autoplay: {
            delay: 1000,//1秒切换一次
        },
        loop : true,
        pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,

        },
    });
    console.log(swiper)
</script>
{% endblock %}